<!DOCTYPE html>
<html>

<head lang="en">
    <title>首页</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/plugins/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/plugins/jquery/jquery.min.js"></script>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <script src="/js/plugins/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/reset.css">
    <link rel="stylesheet" href="/css/travel.css"/>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/css/dialog.css">
    <script src="/js/plugins/dialog2/js/dialog.min.js"></script>
    <link rel="stylesheet" href="/css/reset.css" rel="stylesheet">
    <link rel="stylesheet" href="/css/index.css" rel="stylesheet">
    <script>
        $(function () {
            var keyword = $('.searchBtn').val();
            if(keyword == ""){
            }else{
                show(keyword);
            }
            $('.searchBtn').click(function () {
                keyword = $(this).val();
                console.log(keyword);
                if(keyword == ""){
                }else{
                    show(keyword);
                }
            })


            function show(){
                $.get('/advancedQueries',{keyWord:keyword},function (data) {
                    $('.content').html("");
                    console.log(data);
                    var temp=""
                    if (data.travels.length > 0) {
                        $('.content').append('<div class="container">\n' +
                            '    <h6>相关游记</h6>\n' +
                            '    <div id="travels">\n' +
                            '        \n' +
                            '    </div>\n' +
                            '</div>' +
                            '<hr/>');

                        $.each(data.travels,function (index,ele) {
                            temp += '<div class="row detail">\n' +
                                '            <div class="col">\n' +
                                '                <a href="travelContent.html?id='+ele.id+'">\n' +
                                '                    <h4>'+ele.title+'</h4>\n' +
                                '                </a>\n' +
                                '                <p>\n' +
                                '                    <a href="userProfiles.html?id='+ele.author.id+'">\n' +
                                '                        <img class="rounded-circle head-img" src="'+ele.author.headImgUrl+'">\n' +
                                '                        <span >'+ele.author.nickName+'</span> </a> 在\n' +
                                '                    <span class="addr" >'+ele.place.name+'</span>\n' +
                                '\n' +
                                '                </p>\n' +
                                '                <p>\n' +
                                '                    <i class="fa fa-eye fa-fw"></i>\n' +
                                '                    <span>0</span>\n' +
                                '                    <i class="fa fa-commenting fa-fw"></i>\n' +
                                '                    <span>0</span>\n' +
                                '                </p>\n' +
                                '            </div>\n' +
                                '            <div class="col bigimg">\n' +
                                '                <a href="travelContent.html?id='+ele.id+'">\n' +
                                '                    <img src="'+ele.coverUrl+'">\n' +
                                '                </a>\n' +
                                '            </div>\n' +
                                '        </div>';

                        });
                        $('#travels').append(temp);
                    }

                    temp="";
                    if (data.strategies.length > 0) {
                        $('.content').append('<div class="container">\n' +
                            '    <h6>相关攻略</h6>\n' +
                            '    <div id="strategies">\n' +
                            '        \n' +
                            '    </div>\n' +
                            '</div>' +
                            '<hr/>');
                        $.each(data.strategies,function (index,ele) {
                            temp += '<div class="row hot">\n' +
                                '        <div class="col-4">\n' +
                                '            <a href="strategyCatalogs.html?strategyId='+ele.id+'">\n' +
                                '                <img src="'+ele.coverUrl+'">\n' +
                                '                <p >'+ele.title+'</p>\n' +
                                '            </a>\n' +
                                '        </div>\n' +
                                '    </div>';
                        })
                        $('#strategies').append(temp);
                    }



                    console.log(data.news.length);

                    console.log(data.strategies.length);
                });
            }





        })
    </script>

    <style>
        .template{
            background-color: #f0f0f0;
            height: 8px;
        }
    </style>


</head>


<body>
<input type="hidden" name="currentPage" id="currentPage" value="1">
<input type="hidden" name="pageSize" id="pageSize" value="3">
<div class="search-head">
    <div class="row nav-search">
        <div class="col-2">
            <a href="index.html">
                <span><i class="fa fa-chevron-left fa-2x"></i></span>
            </a>
        </div>
        <div class="col-10">
            <div class="input-group-sm search">
                <input class="form-control searchBtn" placeholder="搜索旅行攻略、日记和旅游资讯">
            </div>
        </div>
    </div>
</div>
<div class="content">
<!--<div class="container">-->
    <!--<h6>相关游记</h6>-->
    <!--<div id="travels">-->
        <!--<div class="row detail">-->
            <!--<div class="col">-->
                <!--<a href="travelContent.html?id=travel.id">-->
                    <!--<h4>travel.title</h4>-->
                <!--</a>-->
                <!--<p>-->
                    <!--<a href="userProfiles.html?id=author_id">-->
                        <!--<img class="rounded-circle head-img" src="travel.author.headImgUrl">-->
                        <!--<span render-html="list.author.nickName"></span> </a> 在-->
                    <!--<span class="addr" render-html="list.place.name"></span>-->

                <!--</p>-->
                <!--<p>-->
                    <!--<i class="fa fa-eye fa-fw"></i>-->
                    <!--<span>0</span>-->
                    <!--<i class="fa fa-commenting fa-fw"></i>-->
                    <!--<span>0</span>-->
                <!--</p>-->
            <!--</div>-->
            <!--<div class="col bigimg">-->
                <!--<a data-href="travelContent.html?id=" render-key="list.id" render-fun="getHref">-->
                    <!--<img render-src="list.coverUrl">-->
                <!--</a>-->
            <!--</div>-->
        <!--</div>-->
    <!--</div>-->
<!--</div>-->
<!--<hr>-->




</div>


</body>
</html>